<template>
  <div>
    <base-layout :visibleContent2="true">
      <template #searchPanel>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="14">调拨单基础信息</el-col>
            <el-col :span="10">
              <el-button
                v-if="
                  fromdata.outStoreId == outStoreId &&
                  fromdata.status == '待审核'
                "
                type="success"
                @click="status('待调拨')"
                >调拨审核通过</el-button
              >
              <el-button
                v-if="
                  fromdata.outStoreId == outStoreId &&
                  fromdata.status == '待审核'
                "
                type="success"
                @click="status('驳回')"
                >调拨审核驳回</el-button
              >
              <el-button type="danger">打印调拨单</el-button>
            </el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="调拨单号:">
                <div>{{ fromdata.code }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出库门店:">
                <div>{{ fromdata.outStoreName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出库仓库:">
                <div>{{ fromdata.outStorageName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调拨原因:">
                <div>{{ fromdata.allotDescDictValue }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="单据日期:">
                <div>{{ fromdata.receiptsTime }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入库门店:">
                <div>{{ fromdata.storeName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入库仓库:">
                <div>{{ fromdata.inStorageName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="调拨配件数量:">
                <div>{{ fromdata.num }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="调拨状态:">
                <div>{{ fromdata.status }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出库总金额:">
                <div>{{ fromdata.amount }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="调拨备注:">
                <div>{{ fromdata.remark }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="12">调拨负责人员</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item label="调拨负责人:">
                <div>{{ fromdata.userName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式:">
                <div>{{ fromdata.phone }}</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #contentPanel2>
        <el-form :inline="true" :model="fromdata" label-width="110px">
          <el-row>
            <el-col :span="12">调拨进度</el-col>
          </el-row>
          <el-divider content-position="center"></el-divider>
          <Steps
            v-if="setpsList != null && setpsList.length > 0"
            :setpsList="setpsList"
          />
        </el-form>
      </template>
    </base-layout>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import { Steps } from '@/components/index'
import { getStoreId } from '@/utils'
import {
  updateStatus,
  detail,
} from '@/api/after-sale/storehouseManage/transferManage'
export default {
  name: 'editClientManage',
  components: { Steps },
  props: {
    fromdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    fromdata: function (value) {
      this.setpsList = value.statusList
    },
  },
  mixins: [
    baseMixin({
      format(res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data() {
    return {
      setpsList: null,
      outStoreId: null,
    }
  },
  methods: {
    status(type) {
      console.log(type)
      updateStatus(this.fromdata.id, type).then((res) => {
        let { success } = res
        if (success) {
          this.$message.success('操作成功')
          detail(this.fromdata.id).then((res) => {
            let { success, data } = res
            this.fromdata = data
          })
        }
      })
    },
  },
  created() {
    this.setpsList = this.fromdata.statusList
    this.outStoreId = getStoreId()
  },
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
